import React from 'react';
import ContactInfoSection from '../components/ContactInfoSection';
import PawPrintIcon from '../components/icons/PawPrintIcon';
import { useConfig } from '../context/ConfigContext';
import { useLanguage } from '../context/LanguageContext';

const HomeView: React.FC = () => {
  const { t } = useLanguage();
  const { config } = useConfig();

  return (
    <div className="flex flex-col gap-16 pb-16">
      <div className="relative h-[600px] w-full overflow-hidden">
        <img
          src="https://images.unsplash.com/photo-1583337130417-3346a1be7dee?auto=format&fit=crop&w=1920&q=80"
          alt="Happy Pets"
          className="absolute inset-0 h-full w-full object-cover brightness-75"
        />
        <div className="absolute inset-0 bg-gradient-to-t from-brand-wood/50 to-transparent"></div>
        <div className="relative z-10 flex h-full flex-col items-center justify-center text-center text-white px-4">
          <h1 className="mb-4 font-serif text-5xl md:text-7xl font-bold tracking-wider drop-shadow-md">{t.home.heroTitle}</h1>
          <p className="text-xl md:text-2xl font-light bg-brand-wood/60 px-6 py-2 rounded-full backdrop-blur-sm">
            {t.home.heroSubtitle}
          </p>
        </div>
      </div>

      <div className="container mx-auto px-4 grid md:grid-cols-2 gap-12 items-center">
        <div className="order-2 md:order-1">
          <img
            src="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?auto=format&fit=crop&w=800&q=80"
            alt="Cat"
            className="rounded-lg shadow-xl w-full object-cover h-[400px] border-4 border-brand-cream"
          />
        </div>
        <div className="order-1 md:order-2 space-y-6">
          <h2 className="text-4xl font-serif text-brand-wood font-bold">{t.home.introTitle}</h2>
          <div className="w-20 h-2 bg-brand-orange rounded-full"></div>
          <p className="text-lg text-gray-700 leading-relaxed font-sans">{t.home.introText}</p>
        </div>
      </div>

      <div className="bg-brand-cream py-16">
        <div className="container mx-auto px-4">
          <h2 className="text-3xl font-serif text-center mb-4 text-brand-wood font-bold">
            {t.contact.title} & {t.home.sampleTitle}
          </h2>
          <div className="w-16 h-1 bg-brand-orange mx-auto mb-10 rounded-full"></div>

          <div className="mb-16">
            <ContactInfoSection />
          </div>

          <div className="max-w-3xl mx-auto">
            <div className="bg-white p-8 rounded-2xl shadow-lg border border-brand-orange/10">
              <h3 className="text-2xl font-serif text-brand-wood mb-6 flex items-center gap-2">
                <PawPrintIcon className="text-brand-orange" /> {t.home.sampleTitle}
              </h3>
              <form className="space-y-6" onSubmit={(e) => e.preventDefault()}>
                <div className="grid md:grid-cols-2 gap-6">
                  <div>
                    <label className="block text-sm font-medium text-brand-wood mb-2">{t.home.formName}</label>
                    <input
                      type="text"
                      className="w-full border border-gray-300 rounded-md p-3 focus:ring-2 focus:ring-brand-orange focus:border-brand-orange focus:outline-none"
                    />
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-brand-wood mb-2">{t.home.formEmail}</label>
                    <input
                      type="email"
                      className="w-full border border-gray-300 rounded-md p-3 focus:ring-2 focus:ring-brand-orange focus:border-brand-orange focus:outline-none"
                    />
                  </div>
                </div>
                <div>
                  <label className="block text-sm font-medium text-brand-wood mb-2">{t.home.formMessage}</label>
                  <textarea
                    rows={4}
                    className="w-full border border-gray-300 rounded-md p-3 focus:ring-2 focus:ring-brand-orange focus:border-brand-orange focus:outline-none"
                  ></textarea>
                </div>
                <button className="w-full bg-brand-orange text-white py-3 rounded-md hover:bg-orange-600 transition-colors font-bold text-lg shadow-md">
                  {t.home.formSubmit}
                </button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default HomeView;

